<template>
  <div style="height: 100%;margin-top: -60px;'">
    <!-- Header -->
    <el-header style=" height: 60px; line-height: 60px; width: 100vw; ">
<h1 >用户管理</h1>
    </el-header>

    <el-container style="height: calc(100vh - 120px);">
      <!-- Menu Bar -->
      <el-aside width="260px" style="padding: 10px; box-sizing: border-box; background-color: #fff; border-left: 1px solid #eee; border-right: 2px solid #eee; margin-left: 5px;">


        <!-- Menu items -->
        <div>
          <span class="el-icon-circle-plus-outline" @click="toggleElement" :class="{ 'el-icon-remove-outline': isActive }"></span>
          <router-link to="/home/settion/yonghu/shanxi">
            <p style="font-size:; display: inline-block; margin-left: 5px;">001-陕西省检察院</p>
          </router-link>

          <div v-show="isVisible" style="width: 150px; margin-left: 20px;">
            <div>
              <span class="el-icon-circle-plus-outline" @click="isActive4 = !isActive4" :class="{ 'el-icon-remove-outline': isActive4 }"></span>
              <router-link to="/home/settion/yonghu/xia">
                <p style="font-size: 14px; display: inline-block; margin-left: 5px;">西安检察院</p>
              </router-link>

              <div v-show="isActive4">
                <router-link to="/home/settion/yonghu/xincheng">
                  <p style="font-size: 12px; display: inline-block; margin-left: 10px;">0040201-新城区检察院</p>
                </router-link>

                <router-link to="/home/settion/yonghu/beil">
                  <p style="font-size: 12px; display: inline-block; margin-left: 10px;">0040202-碑林区检察院</p>
                </router-link>
              </div>
            </div>
            <div>
              <span class="el-icon-circle-plus-outline" @click="isActive3 = !isActive3" :class="{ 'el-icon-remove-outline': isActive3 }"></span>
              <router-link to="/home/settion/yonghu/han">
                <p style="font-size: 14px; display: inline-block; margin-left: 5px;">汉中市检察院</p>
              </router-link>

              <div v-show="isActive3">
                <router-link to="/home/settion/yonghu/hant">
                  <p style="font-size: 12px; display: inline-block; margin-left: 10px;">0010201-汉台区检察院</p>
                </router-link>

                <router-link to="/home/settion/yonghu/nanz">
                  <p style="font-size: 12px; display: inline-block; margin-left: 10px;">0010201-南郑区检察院</p>
                </router-link>
              </div>
            </div>
            <div>
              <span class="el-icon-circle-plus-outline" @click="isActive2 = !isActive2" :class="{ 'el-icon-remove-outline': isActive2 }"></span>
              <router-link to="/home/settion/yonghu/wein">
                <p style="font-size: 14px; display: inline-block; margin-left: 5px;">渭南市检察院</p>
              </router-link>

              <div v-show="isActive2">
                <router-link to="/home/settion/yonghu/linw">
                  <p style="font-size: 12px; display: inline-block; margin-left: 10px;">0010201-临渭区检察院</p>
                </router-link>

                <router-link to="/home/settion/yonghu/daz">
                  <p style="font-size: 12px; display: inline-block; margin-left: 10px;">0010201-大荔县检察院</p>
                </router-link>
              </div>
            </div>
          </div>
        </div>

        <div>
          <span class="el-icon-circle-plus-outline" @click="toggleElement2" :class="{ 'el-icon-remove-outline': isActiveA }"></span>
          <p style="font-size:; display: inline-block; margin-left: 5px;">002-XX省检察院</p>
          <div style="width: 150px; margin-left: 20px;" v-show="isVisibleA">
            <span class="el-icon-circle-plus-outline" @click="isVisibleB = !isVisibleB" :class="{ 'el-icon-remove-outline': isVisibleB }"></span>
            <p style="font-size: 14px; display: inline-block; margin-left: 5px;">XX市检察院1</p>
            <div v-show="isVisibleB">
              <p style="font-size: 12px; margin-left: 10px;">0010201-XX区检察院</p>
              <p style="font-size: 12px; margin-left: 10px;">0010201-XX区检察院</p>
            </div>
          </div>

          <div style="width: 150px; margin-left: 20px;" v-show="isVisibleA">
            <span class="el-icon-circle-plus-outline" @click="isVisibleD = !isVisibleD" :class="{ 'el-icon-remove-outline': isVisibleD }"></span>
            <p style="font-size: 14px; display: inline-block; margin-left: 5px;">XX市检察院2</p>
            <div v-show="isVisibleD" @click.stop>
              <p style="font-size: 12px; margin-left: 10px;">0010201-XX区检察院2</p>
              <p style="font-size: 12px; margin-left: 10px;">0010201-XX区检察院2</p>
            </div>
          </div>
        </div>
      </el-aside>

      <!-- Content Area -->
      <el-container style="height: 100%;">
        <RouterView></RouterView>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  computed: {
    activeData() {
      return {
        isVisible: this.isVisible,
        isVisible2: this.isVisible2,
        isVisible3: this.isVisible3,
      };
    },
  },
  data() {
    return {
      isVisible: false,
      isVisibleA: false,
      isVisibleB: false,
      isActive: false,
      isActive2: false,
      isActive3: false,
      isActive4: false,
      isActiveA: false,
      isActiveB: false,
      isVisibleC: true,
      isVisibleD: false,
    };
  },
  methods: {
    toggleElement() {
      this.isVisible = !this.isVisible;
      this.isVisible2 = !this.isVisible2;
      this.isActive = !this.isActive;
    },
    toggleElement2() {
      this.isVisibleA = !this.isVisibleA;
      this.isActiveA = !this.isActiveA;
    },
  },
};
</script>

<style scoped>
p {
  margin: 0;
  padding: 0;
}

a {
  color: #333;
}
h1{
  font-weight: normal
}
.el-header{
font-size: 25px;
font-weight: 300;
outline: 1px solid #eee;
margin-left: 5.8px;
}
.el-header,
.el-footer {
  color: #333;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  line-height: 30px;
}
</style>












